<template>
	<view class="content">
		<view class="user-item">
			<view class="user-item-title">{{userInfo.title}}</view>
			<view class="user-item-msg">
				<image v-if="userInfo.field=='head_pic'" :src="userInfo.value" @click="upload"></image>
				<picker v-else-if="userInfo.field=='gender'" @change="bindPickerChange" :value="index" range-key="name"
					:range="array">
					<view class="uni-input">{{array[index].name}}</view>
				</picker>
				<input v-else placeholder="请输入" v-model="userInfo.value" />
			</view>
		</view>
		<!-- 权限弹框 -->
		<view class="quanxian" v-if="quanShow">
			<view class="">
				存储空间/相机权限说明
			</view>
			<view class="">
				用于在添加、制作、上传、发布、分享、下载、搜索、识别图片和视频等场景中读取和写入相册和文件内容，拒绝将无法使用相关功能
			</view>
		</view>
		<view class="button" @click="save">保存</view>
	</view>
</template>

<script>
	import {
		avatarUpload,
		userUpdate
	} from "../../static/js/api/user.js";
	import Cache from "../../static/js/cache.js";
	import config from "../../static/js/config.js";
	import {
		permissionCheck,
		phonePermissionSetting
	} from "../../utils/phonePermissionCheck.js"
	export default {
		data() {
			return {
				userInfo: {},
				index: 0,
				array: [{
					name: "男",
					id: 1
				}, {
					name: "女",
					id: 2
				}],
				quanShow: false,
			}
		},
		onLoad(option) {
			if (option.userItem) {
				this.userInfo = JSON.parse(option.userItem)
				console.log(this.userInfo)
				if (this.userInfo.field == 'gender') {
					this.array.forEach((item, index) => {
						if (item.id == this.userInfo.value) {
							this.index = index
						}
					})
				}
				uni.setNavigationBarTitle({
					title: this.userInfo.title
				})
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log(e)
				this.index = e.detail.value
				this.userInfo.value = this.array[this.index].id
			},
			upload() {
				let _that = this
				let system = uni.getSystemInfoSync();
				if (system.platform === 'android') {
					_that.quanShow = true
					plus.android.requestPermissions(['android.permission.CAMERA'],
						(e) => {
							if (e.deniedAlways.length > 0) {
								// 弹出提示框解释为何需要权限，引导用户打开设置页面开启  
								uni.showModal({
									title: '提示',
									content: '请打开手机相机相册功能（点击确定后在权限中授权相机相册功能）',
									// showCancel: false, // 不显示取消按钮
									success(res) {
										if (res.confirm) {
											var Intent = plus.android.importClass("android.content.Intent");
											var Settings = plus.android.importClass(
												"android.provider.Settings");
											var Uri = plus.android.importClass("android.net.Uri");
											var mainActivity = plus.android.runtimeMainActivity();
											var intent = new Intent();
											intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
											var uri = Uri.fromParts("package", mainActivity.getPackageName(),
												null);
											intent.setData(uri);
											mainActivity.startActivity(intent);
										}
									}
								});
							} else if (e.deniedPresent.length > 0) { //权限被临时拒绝 
								// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限  
								uni.showModal({
									title: '提示',
									content: '请打开手机相机功能（点击确定后在权限中授权相机功能）',
									// showCancel: false, // 不显示取消按钮
									success(res) {
										if (res.confirm) {
											var Intent = plus.android.importClass("android.content.Intent");
											var Settings = plus.android.importClass(
												"android.provider.Settings");
											var Uri = plus.android.importClass("android.net.Uri");
											var mainActivity = plus.android.runtimeMainActivity();
											var intent = new Intent();
											intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
											var uri = Uri.fromParts("package", mainActivity.getPackageName(),
												null);
											intent.setData(uri);
											mainActivity.startActivity(intent);
										}
									}
								});
							} else {
								plus.android.requestPermissions(['android.permission.READ_EXTERNAL_STORAGE'], (e) => {
									if (e.deniedAlways.length > 0) { //权限被永久拒绝  
										// 弹出提示框解释为何需要权限，引导用户打开设置页面开启  
										uni.showModal({
											title: '提示',
											content: '请打开相册存储功能（点击确定后在权限中授权相册存储功能）',
											// showCancel: false, // 不显示取消按钮
											success(res) {
												if (res.confirm) {
													var Intent = plus.android.importClass(
														"android.content.Intent");
													var Settings = plus.android.importClass(
														"android.provider.Settings");
													var Uri = plus.android.importClass(
														"android.net.Uri");
													var mainActivity = plus.android
														.runtimeMainActivity();
													var intent = new Intent();
													intent.setAction(Settings
														.ACTION_APPLICATION_DETAILS_SETTINGS);
													var uri = Uri.fromParts("package", mainActivity
														.getPackageName(),
														null);
													intent.setData(uri);
													mainActivity.startActivity(intent);
												}
											}
										});
									} else if (e.deniedPresent.length > 0) { //权限被临时拒绝 
										// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限  
										uni.showModal({
											title: '提示',
											content: '请打开相册存储功能（点击确定后在权限中授权相册存储功能）',
											// showCancel: false, // 不显示取消按钮
											success(res) {
												if (res.confirm) {
													var Intent = plus.android.importClass(
														"android.content.Intent");
													var Settings = plus.android.importClass(
														"android.provider.Settings");
													var Uri = plus.android.importClass(
														"android.net.Uri");
													var mainActivity = plus.android
														.runtimeMainActivity();
													var intent = new Intent();
													intent.setAction(Settings
														.ACTION_APPLICATION_DETAILS_SETTINGS);
													var uri = Uri.fromParts("package", mainActivity
														.getPackageName(),
														null);
													intent.setData(uri);
													mainActivity.startActivity(intent);
												}
											}
										});
									} else {
										//在此处可以进行操作可以使用uni.chooseImage()
										_that.quanShow = false
										uni.chooseImage({
											success: (chooseImageRes) => {
												_that.userInfo.value = chooseImageRes.tempFilePaths[0];
											}
										});

									}
								})
							}
						})
				} else {

					uni.chooseImage({
						success: (chooseImageRes) => {
							_that.userInfo.value = chooseImageRes.tempFilePaths[0];
							console.log(43, _that.userInfo.value)
						}
					});
				}
			},
			save() {
				if (this.userInfo.field == 'head_pic') {
					uni.uploadFile({
						url: config.baseUrl + '/user/avatar',
						filePath: this.userInfo.value,
						name: 'file',
						header: {
							'token': Cache.cache.get('token')
						},
						success: (uploadFileRes) => {
							uni.showToast({
								title: "保存成功",
								icon: "none"
							})
							uni.navigateBack({
								delta: 1
							})
						}
					});
				} else {
					if (this.userInfo.field == 'id_card') {
						var p =
							/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
						if (!p.test(this.userInfo.value)) {
							uni.showToast({
								icon: 'none',
								title: "请输入正确的身份证号"
							})
							return
						}

					}
					let params = {}
					params[this.userInfo.field] = this.userInfo.value
					console.log(params)
					userUpdate(params).then(res => {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
						uni.navigateBack({
							delta: 1
						})
					})
				}
			},
		}
	}
</script>

<style lang="scss" scped>
	.content {
		.button {
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 10rpx;
			margin-top: 40rpx;
			margin-left: 30rpx;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: bold;
			background-color: $uni-color-primary;
		}

		.quanxian {
			background: #fff;
			padding: 24rpx;
			border-radius: 26rpx;
			position: fixed;
			top: 200rpx;
			left: 24rpx;
			right: 24rpx;

			view:first-child {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
			}

			view:last-child {
				font-size: 28rpx;
				color: #555;
				margin-top: 14rpx;
				line-height: 30rpx;
			}
		}

		.user-item {
			display: flex;
			background-color: #fff;
			margin-bottom: 2rpx;
			height: 100rpx;
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;

			.user-item-msg {
				font-size: 28rpx;
				font-weight: 400;
				color: #7A7A7A;
				display: flex;
				align-items: center;

				input {
					text-align: right;
				}

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50% 50%;
				}
			}
		}
	}
</style>